<template>
    <el-row type="flex" align="middle">
        <el-col :span="8" :offset="3" class="right">
            <p>{{ new Date(time*1000) }}</p>
            <p>{{ new Date(time*1000) | formatDate }}</p>
            <p>{{ new Date(time*1000) | formatDate('yyyy年MM月dd日 HH:mm:ss') }}</p>
            <img src="@/assets/img/login_img.png" alt="" srcset="">
        </el-col>
        <el-col :span="8" :offset="2">
            <el-card>
                <div class="logo">
                    <img src="@/assets/img/favicon.png" alt="" srcset="">
                    <h5>电商后台管理系统</h5>
                </div>
                <!-- 
                    1. 被校验的操作组件必须定义在 el-form 组件中
                    2. 为el-form提供完整的校验数据存储对象
                    3. 为el-form!提供数据对象属性对应!的校验规则描述配置=增量配置(配置采用async-validator模块规则)
                    4. 为el-form-item 提供 prop 属性用于设定校验消息的存储对应关系
                        ==> 当 el-form-item 添加了 label 属性时候，会自动完成表单名称追加，如果该组件定义有必传项校验，文本前面会自动增加*
                    5. 
                -->
                <el-form :model="user" :rules="$rules.user" v-loading="loginLoading" ref="loginForm">
                    <el-form-item prop="username">
                        <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="user.username"></el-input>
                    </el-form-item>
                     <el-form-item prop="password">
                        <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" show-password v-model="user.password" ></el-input>
                    </el-form-item>
                     <el-form-item>
                        <el-button type="primary" @click="dologin()">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            time:1606302599,
            loginLoading:false,
            user:{
                username:"",
                password:""
            },
            // userRules:{
            //     username:[
            //         { required:true,message:"登录名不能为空",trigger:"blur" },
            //         { min:3,message:"登录名长度错误",trigger:"blur" }
            //     ],
            //     password:[
            //         { required:true,message:"登录密码不能为空",trigger:"blur" },
            //         { min:3,message:"登录密码长度错误",trigger:"blur" } 
            //     ]
            // }
        }
    },
    methods:{
        async dologin(){
            try {
                // 当ref被定义于组件标签上时，通过 $refs 获取的为组件的构成实例
                // console.log( this.$refs.loginForm );
                await this.$refs.loginForm.validate()
                this.loginLoading = true;
                let user = await this.$api.login( this.user )
                console.log(user);
                this.user.password = ""
                // 页面切换
                if(user){
                    this.$store.commit("setToken",user.token)
                    this.$router.push({
                        name:"home"
                    })
                }
            } catch (error) {
                // console.log(error)
                
            } finally {
                this.loginLoading = false;
            }
        }
    }
}
</script>

<style lang="less" scoped>
@bgc: #909399;
.el-row{
    background-color:@bgc;
    height: 100%;
}
.right{
    text-align: right;
    >img{
        width: 100%;
        height: auto;
    }
}
.el-card{
    display: inline-block;
    min-height: 400px;
    width: 400px;
    overflow: unset;
}
.logo{
    @size:180px;
    position: relative;
    padding-top: (@size/2)-20;
    >img{
        position: absolute;
        height: @size;
        width: @size;
        border: 8px solid @bgc;
        top: -(@size/2)-20;
        left: 50%;
        transform: translate(-50%,0);
        background-color: white;
        border-radius: 50%;
        box-sizing: border-box;
        padding: 15px;
    }
    >h5{
        font-size: 20px;
        text-align: center;
        margin: 14px 0px;
        color: #333;
    }
}
.el-form{
    margin-top: 30px;
    .el-form-item{
        padding-top: 10px;
    }
    .el-button{
        width: 100%;
    }
}
</style>